<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8" />
	<meta name="author" content="Liang wei">
    <meta name="viewport" content="width= device-width , user-scalable=no,initial-scale=1.0" />
	<link rel="stylesheet" href="css/header.css" />
	<link rel="stylesheet" href="css/lunbo.css" />
	<!--<link rel="stylesheet"  href="css/base.css"/>-->
	<!--<link rel="stylesheet" href="css/index.css" />-->
	<!--<script type="text/javascript" src="js/lunbo.js" ></script>-->
	<script type="text/javascript" src="js/jquery-3.1.1.js" ></script>
	<script type="text/javascript" src="js/vue.js" ></script>
	<link rel="stylesheet" href="css/footer.css" />
	
	<style>
		.activity_title{
	       font-size: 30px;
	    
	       background: blue;
	  
         }
			.activity-list{
			   /* border: 1px solid red;*/
				width: 98%;
				height: 200px;
				overflow: hidden;
				margin: 0 5%;
				padding: 0;
				/*display: flex;
				/*justify-content: flex-start;*/*/
			}
			.activity-list-item{
				/*border: 1px solid red;*/
				position: relative;
			    float: left;
				height: 150px;
				width: 50%;
			
				margin: 7px 2.5%;
				
				overflow: hidden;
				
			}
			
			.activity-list-item>img{
			/*	/*border: 1px solid red;*/*/
				width: 100%;
				height: 260px;	
						
			}
			.activity-list-item>div{
			
				/*border: 1px solid red;*/
				position: absolute;
				width: 60%;
				height: 50px;
				top: 80px;
				left: 40px;
			/*	background-color: rgba(0,0,0,0.3);*/
				color: black;
				font-size: 25px;
				font-family: "agency fb";
				text-align: center;
				line-height: 100px;
				
			}
			


		
	</style>
	</head>
	<body>
		<div>
			
			
		<div>
		<header>
				<img src="img/logo.png"  />
				<form class="search" action="">
					<input class="search_text" type="text" placeholder="搜索" />
				</form>
				<!--<a id="login" href="login.html">登录</a>
				<a id="signin" href="#">注册</a>-->
		</header>
    	
  
    	
   </div>
		 <div class="hm_banner">
            <ul class="clearfix">
                <li><a href="#"><img src="img/轮播1.jpg"  alt=""/></a></li>
                <li><a href="#"><img src="img/轮播2.jpg" alt=""/></a></li>
                <li><a href="#"><img src="img/轮播3.jpg" alt=""/></a></li>
                <li><a href="#"><img src="img/轮播1.jpg" alt=""/></a></li>
                <li><a href="#"><img src="img/轮播2.jpg" alt=""/></a></li>
                <li><a href="#"><img src="img/轮播3.jpg" alt=""/></a></li>
                <li><a href="#"><img src="img/轮播1.jpg" alt=""/></a></li>
                <li><a href="#"><img src="img/轮播2.jpg" alt=""/></a></li>
          		<li><a href="#"><img src="img/轮播2.jpg" alt=""/></a></li>
              
            </ul>
            <ul>
                <li class="now"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
       </div>
      <div class="part-one" id="app">
		 	
		     <p class="activity_title">菜鸟训练</p>
			  <ul class="activity-list">
				<li class="activity-list-item" >
					
					<a href="train21.html?id=1"><img :src="'http://172.24.10.175/workout/Uploads/'+thumb1" />
				    <div>{{intro1}}</div>
					</li>					 			
			 </ul>
		     
		  <p class="activity_title">进阶训练</p>
			  <ul class="activity-list">
				<li class="activity-list-item" >					
					<a href="train21.html?id=2"><img :src="'http://172.24.10.175/workout/Uploads/'+thumb2" />				
					<div>{{intro2}}</div>	
				</li>					 			
			 </ul>    
		      <p class="activity_title">入门训练</p>
			  <ul class="activity-list">
				<li class="activity-list-item" >					
					<a href="train21.html?id=3"><img :src="'http://172.24.10.175/workout/Uploads/'+thumb3" />				
				    <div>{{intro3}}</div>
				</li>					 			
			  </ul>
		 
		 </div>  
     </div>  
       </div>
       
       
	<!--尾栏-->
	<div class="footer_box">
		
	          <a href="train2.html"><img src="img/步数.png"/>训练</a>     
               <a href="club.html"><img src="img/运动.png"/>俱乐部</a>
               <a href="index.html"><img src="img/设备.png"/>约建</a>
               <a href="showpicture.html"><img src="img/活动.png"/>晒图</a>   
              <a href="wode.html"><img src="img/首页.png"/>我的</a>
   </div>
	</footer>
		<script>
		 	var app=new Vue({
		 		el:"#app",
		 		data:{		 			
		 			thumb1:"",
		 			thumb2:"",
		 			thumb3:"",		 			
		 			intro1:"",
		 			intro2:"",
		 			intro3:"",
		 		},
		 		mounted:function(){
		 			this.getData();
		 		},
		 		methods:{
		 			getData:function(){

		 				var _this=this;
		 				
		 				$.ajax({
		 					type:"get",
		 					
		 					url:"http://172.24.10.175/workout/api.php/lists/mod/train/degree/1",
		 					async:true,
		 					dataType:"jsonp",
		 					success:function(data){

		 						_this.thumb1=data[0].thumb;
		 						_this.intro1=data[0].intro;
		 					}
		 				});
		 				
                         $.ajax({
		 					type:"get",
		 					url:"http://172.24.10.175/workout/api.php/lists/mod/train/degree/2",
		 					async:true,
		 					dataType:"jsonp",
		 					success:function(data){
//		 						_this.thumbsize2=data[0].thumbsize;
		 						_this.thumb2=data[0].thumb;
		 						_this.intro2=data[0].intro;
		 					}
		 				});
		 				
		 				
		 				
		 				$.ajax({
		 					type:"get",
		 					url:"http://172.24.10.175/workout/api.php/lists/mod/train/degree/3",
		 					async:true,
		 					dataType:"jsonp",
		 					success:function(data){
//		 						_this.thumbsize3=data[0].thumbsize;
		 						_this.thumb3=data[0].thumb;
		 						_this.intro3=data[0].intro;
		 					}
		 				});



		 			}
		 		}
		 	});
		 </script>
		
	<!--</script>-->
	</body>
	

</html>
